<template>
  <div class="flex-col page section_2">
    <div class="flex-col">
      <c-title :hide="false" text="用户反馈"></c-title>
    </div>
    <div class="flex-col">
      <div class="flex-col group_2 view_2">
        <span class="self-start font text_2">姓名</span>
        <div class="mt-12 flex-col justify-start items-start self-stretch text-wrapper">
          <!-- <span class="font_2 text_3">请输入您的姓名</span> -->
          <input type="text" v-model="username" class="font_2 text_3" placeholder="请输入您的姓名" />
        </div>
      </div>
    </div>
    <div class="flex-col group_2 view_2">
      <span class="self-start font text_2">手机号</span>
      <div class="mt-12 flex-col justify-start items-start self-stretch text-wrapper">
        <input type="number" v-model="mobile" class="font_2 text_3" placeholder="请输入您的手机号" />
      </div>
    </div>
    <div class="flex-col group_2 view_3">
      <span class="self-start font text_2">反馈内容</span>
      <div class="mt-12 flex-col justify-start items-start self-stretch text-wrapper_2">
        <!-- <span class="font_2 text_3">请输入您想反馈的问题</span> -->
        <textarea name="feedbackCon" v-model="feedbackCon" id="feedbackCon" class="font_22 text_3" placeholder="请输入您想反馈的问题"></textarea>
      </div>
    </div>
    <div @click="submit" class="flex-col justify-start items-center text-wrapper_3"><span class="font text_4">提交</span></div>
  </div>
</template>
    
<script>
import userFeedbackController from "./userFeedbackController";

export default userFeedbackController;
</script>
    <style>
body {
  background-color: #f5f7fa;
}
</style>
    
    <style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .van-nav-bar {
  border-bottom: none !important;
  background: rgba(0, 0, 0, 0) !important;
}
::v-deep .van-button--default {
  background: none !important;
}
::v-deep .van-nav-bar__title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #151515 !important;
}
//   @import "../common/common.css";
@import "../../../assets/css/commoncss/common.css";
.page {
  padding-bottom: 9.03rem;
  background-color: #f5f7fa;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  //   height: 11.5rem;
}
.section {
  background-color: #ffffff;
  background-image: linear-gradient(0deg, #f5f7fa 0%, #e5fcfa 99%, #e5fcfa 100%);
}
.section_2 {
  background-image: linear-gradient(0deg, #f5f7fa 0%, #e5fcfa 99%, #e5fcfa 100%);
  //   height: 7.13rem;
  background-repeat: no-repeat;
  background-size: 100% 7.13rem;
}
.image {
  width: 20.47rem;
  height: 0.75rem;
}
.pos {
  position: absolute;
  right: 1.13rem;
  top: 1.03rem;
}
.image_2 {
  width: 0.63rem;
  height: 1.09rem;
}
.pos_3 {
  position: absolute;
  left: 0.59rem;
  bottom: 2.72rem;
}
.text {
  color: #222222;
  font-size: 1.13rem;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 1.06rem;
}
.pos_4 {
  position: absolute;
  left: 50%;
  bottom: 2.78rem;
  transform: translateX(-50%);
}
.section_3 {
  padding: 0.44rem 0.84rem;
  background-color: #ffffffe6;
  border-radius: 0.99rem;
  width: 5.47rem;
}
.pos_2 {
  position: absolute;
  right: 0.69rem;
  top: 2.94rem;
}
.image_3 {
  width: 1.94rem;
  height: 1.19rem;
}
.image_4 {
  width: 1.09rem;
  height: 1.09rem;
}
.group_2 {
  padding: 0 1.56rem;
}
.view {
  margin-top: -0.66rem;
}
.font {
  font-size: 0.94rem;
  font-family: PingFang SC;
  line-height: 0.91rem;
  font-weight: 500;
  color: #222222;
}
.text_2 {
  margin-left: 0.19rem;
}
.text-wrapper {
  padding: 1.28rem 0;
  background-color: #ffffff;
  border-radius: 0.38rem;
}
.font_2 {
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.81rem;
  color: #999999;
  border: none;
}
.font_22 {
  width: 90%;
  font-size: 0.88rem;
  font-family: PingFang SC;
  line-height: 0.81rem;
  color: #999999;
  border: none;
  height: 100%;
  overflow-y: scroll;
}
.text_3 {
  margin-left: 0.94rem;
}
.view_2 {
  margin-top: 1.31rem;
}
.view_3 {
  margin-top: 1.28rem;
}
.text-wrapper_2 {
  padding: 1.28rem 0 1.28rem;
  background-color: #ffffff;
  border-radius: 0.38rem;
  height: 14.31rem;
}
.text-wrapper_3 {
  margin: 3.88rem 1.56rem 0;
  padding: 0.94rem 0;
  background-image: linear-gradient(0deg, #01a99c 0%, #01cbbb 100%);
  box-shadow: 0rem 0.41rem 0.81rem 0.034rem #08958a29;
  border-radius: 0.5rem;
}
.text_4 {
  color: #ffffff;
  font-weight: unset;
}
</style>
    